/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #953a09;
  --ifm-color-primary-dark: #863408;
  --ifm-color-primary-darker: #7f3108;
  --ifm-color-primary-darkest: #682906;
  --ifm-color-primary-light: #a4400a;
  --ifm-color-primary-lighter: #ab430a;
  --ifm-color-primary-lightest: #c24b0c;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme="dark"] {
  --ifm-color-primary: #ffb752;
  --ifm-color-primary-dark: #ffa930;
  --ifm-color-primary-darker: #ffa21f;
  --ifm-color-primary-darkest: #ec8a00;
  --ifm-color-primary-light: #ffc574;
  --ifm-color-primary-lighter: #ffcc85;
  --ifm-color-primary-lightest: #ffe1b7;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/*

Mobile: <996px
Small : 996px - 1159px
Medium : 1160px - 1429px
Large : >1430px

*/

.display-mobile {
  display: block;
}

@media (min-width: 996px) {
  .display-mobile {
    display: none;
  }
}

.display-small {
  display: none;
}

@media (min-width: 996px) and (max-width: 1159px) {
  .display-small {
    display: block;
  }
}

.display-medium {
  display: none;
}

@media (min-width: 1161px) and (max-width: 1429px) {
  .display-medium {
    display: block;
  }
}

.display-large {
  display: none;
}

@media (min-width: 1430px) {
  .display-large {
    display: block;
  }
}
